// src/assets/styles/layouts.less

// Common Variables
@primary-padding: 15px;
@secondary-padding: 20px;
// Use Element Plus CSS variables for colors to support dark mode
@border-color: var(--el-border-color-lighter); // Element Plus border color
@left-panel-bg: var(
  --el-bg-color-page
); // Element Plus page background color (often suitable for side panels)
@content-bg: var(--el-bg-color); // Element Plus base background color
@default-border-radius: 3px;
@default-box-shadow: var(--el-box-shadow-light); // Element Plus light shadow
@default-margin-bottom: 20px;
@text-color-primary: var(--el-text-color-primary);
@text-color-secondary: var(--el-text-color-secondary);

// Mixins (if needed in the future, e.g., for flexbox centering)
.flex-center() {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* SearchTableLayout Styles */
.search-table-layout {
  display: flex;
  flex-direction: column;
  background-color: @content-bg;
  height: 100%;
  border-radius: @default-border-radius;
  box-shadow: @default-box-shadow;

  .search-area-wrapper {
    padding: @secondary-padding @secondary-padding 0;
  }

  .button-area-wrapper {
    padding-left: @secondary-padding;
  }

  .table-area-wrapper {
    flex-grow: 1;
    padding: @secondary-padding;
  }

  // Renamed from .pager-area-wrapper to .pagination-area-wrapper for consistency
  .pagination-area-wrapper {
    margin-top: 0;
    padding: @primary-padding 0;
    display: flex;
    justify-content: flex-end;
    background-color: transparent;
  }
}

// General utility classes (optional)
.card-style {
  padding: @secondary-padding;
  background-color: @content-bg;
  border-radius: @default-border-radius;
  box-shadow: @default-box-shadow;
  margin-bottom: @default-margin-bottom;
}

// 上中下布局
.template-layout {
  position: relative;
  height: calc(100vh - 155px);
  overflow: hidden;

  .el-header {
    padding: 12px;
    height: auto;
    line-height: normal;
    background: @content-bg;
    border-bottom: 1px solid @border-color;
    border-radius: @default-border-radius @default-border-radius 0 0;
  }

  .el-main {
    padding: 12px 12px 0 12px;
    background: @content-bg;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .el-footer {
    padding: 20px;
    border-top: 1px solid @border-color;
    background: @content-bg;
    border-radius: 0 0 @default-border-radius @default-border-radius;
  }

  // 当只有main时的圆角
  &:not(:has(.el-header)):not(:has(.el-footer)) .el-main {
    border-radius: @default-border-radius;
  }

  // 当只有header时
  &:has(.el-header):not(:has(.el-footer)) .el-main {
    border-radius: 0 0 @default-border-radius @default-border-radius;
  }

  // 当只有footer时
  &:not(:has(.el-header)):has(.el-footer) .el-main {
    border-radius: @default-border-radius @default-border-radius 0 0;
  }
}

// 表单或抽屉的布局
.dialog-template-layout {
  position: relative;
  // height: calc(100vh - 155px);
  overflow: hidden;

  .el-header {
    padding: 12px;
    height: auto;
    line-height: normal;
    background: @content-bg;
    border-bottom: 1px solid @border-color;
    border-radius: @default-border-radius @default-border-radius 0 0;
  }

  .el-main {
    padding: 0px 12px 0 12px;
    background: @content-bg;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .el-footer {
    padding: 20px;
    border-top: 1px solid @border-color;
    background: @content-bg;
    border-radius: 0 0 @default-border-radius @default-border-radius;
  }

  // 当只有main时的圆角
  &:not(:has(.el-header)):not(:has(.el-footer)) .el-main {
    border-radius: @default-border-radius;
  }

  // 当只有header时
  &:has(.el-header):not(:has(.el-footer)) .el-main {
    border-radius: 0 0 @default-border-radius @default-border-radius;
  }

  // 当只有footer时
  &:not(:has(.el-header)):has(.el-footer) .el-main {
    border-radius: @default-border-radius @default-border-radius 0 0;
  }
}
